<template>
    <div class="relative w-full h-full">
      <PageHeader :title="$t('paymentRecord.缴费记录')" />
      <div class="flex_aic_jcsb">
        <div class="flex_aic gap-4">
          <el-date-picker
            v-model="searchForm.payTime"
            type="daterange"
            :range-separator="$t('datePick.至')"
            :start-placeholder="$t('datePick.开始日期')"
            :end-placeholder="$t('datePick.结束日期')"
            style="width: 350px"
          />
          <el-input v-model="searchForm.merchantName" :placeholder="$t('paymentRecord.请输入商家名称')" style="width: 200px">
            <template #prefix>
              <span class="color-555555">{{ $t('paymentRecord.商家名称') }}</span>
            </template>
          </el-input>
          <el-select v-model="searchForm.status" :placeholder="$t('paymentRecord.请选择状态')" style="width: 200px">
            <el-option :label="$t('paymentRecord.申请中')" :value="1" />
            <el-option :label="$t('paymentRecord.已通过')" :value="2" />
            <el-option :label="$t('paymentRecord.已驳回')" :value="3" />
          </el-select>
        </div>
        <div class="flex_aic">
          <el-button @click="resetSearch">{{$t('searchCom.重置')}}</el-button>
          <el-button type="primary" @click="handleSearch">{{$t('searchCom.查询')}}</el-button>
        </div>
      </div>
  
      <el-table
        :data="tableData"
        style="width: 100%"
        class="cover-table mt12"
        height="calc(100% - 150px)"
        border
      >
        <el-table-column prop="merchantName" :label="$t('商家名称')" />
        <el-table-column prop="merchantId" :label="$t('商户ID')" />
        <el-table-column prop="phone" :label="$t('联系电话')" />
        <el-table-column prop="amount" :label="$t('缴纳金额')">
          <template #default="scope">
            ¥{{ scope.row.amount }}
          </template>
        </el-table-column>
        <el-table-column prop="payTime" :label="$t('缴纳时间')" />
        <el-table-column prop="status" :label="$t('状态')">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column :label="$t('操作')" width="120">
          <template #default="scope">
            <div class="flex_aic_jcc">
              <el-button 
                type="text" 
                size="small" 
                @click="handleAudit(scope.row)"
                v-if="scope.row.status === 1"
              >
                {{ $t('paymentRecord.审核') }}
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
  
      <div class="flex justify-end mt24 absolute bottom-0 right-0">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 40]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
  
      <editDia ref="editDiaRef" v-model="showEditDia" :data="editData" />
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import editDia from "./editDia.vue";
  
  const searchForm = ref({
    payTime: [],
    merchantName: '',
    status: ''
  })
  
  const editDiaRef = ref(null)
  const showEditDia = ref(false)
  const editData = ref({})
  
  const currentPage = ref(1)
  const pageSize = ref(10)
  const total = ref(0)
  
  const tableData = ref([
    {
      merchantName: '示例商家',
      merchantId: 'M2024032001',
      phone: '13800138000',
      amount: '5000.00',
      payTime: '2024-03-20 10:00:00',
      status: 1
    }
  ])
  
  const getStatusType = (status) => {
    const map = {
      1: 'warning',
      2: 'success',
      3: 'danger'
    }
    return map[status]
  }
  
  const getStatusText = (status) => {
    const map = {
      1: '申请中',
      2: '已通过',
      3: '已驳回'
    }
    return map[status]
  }
  
  const resetSearch = () => {
    searchForm.value = {
      payTime: [],
      merchantName: '',
      status: ''
    }
  }
  
  const handleSearch = () => {
    // 实现查询逻辑
  }
  
  const handleAudit = (row) => {
    editData.value = row
    showEditDia.value = true
  }
  
  const handleSizeChange = (size) => {
    pageSize.value = size
  }
  
  const handleCurrentChange = (page) => {
    currentPage.value = page
  }
  </script>
  
  <style lang="scss" scoped>
  .cover-table {
    margin-top: 20px;
  }
  </style>